<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<!-- 
		   viewport 视口
		   媒体查询是css新语法
		   1.@media可以针对不同的屏幕尺寸设置不同的样式，页面就会根据浏览器的宽度和高度自适应
		   2.媒体类型 all print scree
		   3.媒体特性 min-width max-width
		   @media 媒体类型 and|not|only (媒体特性) {
		     css;
		   }
		 -->
	</head>
	<style type="text/css">
		/*
		  
		*/
		/* @media screen and (max-width:996px) {
			body {
				background-color: orange;
			}
		}

		@media screen and (max-width:500px) {
			body {
				background-color: yellowgreen;
			}
		} */

		@media screen and (min-width:550px) {
			body {
				background-color: green;
			}
		}

		@media screen and (min-width:997px) {
			body {
				background-color: orange;
			}
		}
	</style>
	<body>
		11
	</body>
</html>
